<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>客户取款</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="container mt-5">
    <h2>客户取款</h2>
    <form id="withdrawForm" th:action="@{/trade/withdraw}" method="post">
        <div class="mb-3">
            <label for="cardId" class="form-label">银行卡号</label>
            <input type="text" class="form-control" id="cardId" name="cardId" required placeholder="请输入银行卡号">
        </div>
        <div class="mb-3">
            <label for="amount" class="form-label">取款金额</label>
            <input type="number" class="form-control" id="amount" name="amount" required min="0.01" step="0.01" placeholder="请输入取款金额">
        </div>
        <button type="submit" class="btn btn-primary">确认取款</button>
        <a th:href="@{/customer/index}" class="btn btn-secondary ms-2">返回首页</a>
    </form>
    <div id="message" class="mt-3"></div>
</div>

<script>
    // 使用Ajax提交表单（可选）
    document.getElementById('withdrawForm').addEventListener('submit', function(e) {
        e.preventDefault();
        let form = e.target;
        let formData = new FormData(form);

        fetch(form.action, {
            method: 'POST',
            body: formData,
        }).then(res => res.json())
            .then(data => {
                const messageDiv = document.getElementById('message');
                if(data.success){
                    messageDiv.innerHTML = '<div class="alert alert-success">' + data.message + '</div>';
                    form.reset();
                } else {
                    messageDiv.innerHTML = '<div class="alert alert-danger">' + data.message + '</div>';
                }
            })
            .catch(err => {
                alert('请求失败，请稍后重试');
            });
    });
</script>

</body>
</html>